<template>
  <div class="staff-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-fm">
        <el-input style="width: 120px" placeholder="姓名" v-model="dg.ps.find" />

        <el-date-picker style="width: 315px" v-model="dg.ps.time" type="datetimerange" range-separator="至"
          value-format="yyyy-MM-dd HH:mm" start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>

        <el-select v-model="dg.ps.state" placeholder="状态" style="width: 100px" clearable>
          <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <SelTeamGroup :deptNames="''" :tipText="'请选择查询部门'" :width="210" :isMult="false" :isSelAny="true"
          @selItem="getSeledTeamGroup">
        </SelTeamGroup>

        <el-select v-model="dg.ps.childType" placeholder="请假类型" style="width: 120px" clearable>
          <el-option v-for="item in leaveTypeOptions" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd(true)">新增请假</el-button>
        <el-button type="primary" icon="el-icon-edit-outline " @click="getUpdMdState(true)">修改</el-button>
        <el-button type="primary" icon="el-icon-circle-check" @click="handleAudit">审核通过</el-button>
        <el-button type="primary" icon="el-icon-circle-check" @click="handleNotAudit">审核不通过</el-button>
        <el-button type="primary" icon="el-icon-printer" @click="handleBackAfter">提前销假</el-button>
        <el-button type="primary" icon=" el-icon-delete" @click="deleteLeave">删除</el-button>
      </div>

      <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'休假列表'" :dgName="dg.dgName" :tbId="dg.tbName"
        :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
    </div>
    <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit :row-class-name="rowClassName"
      @selection-change="selRowChange">
      <el-table-column fixed="left" type="selection" width="40"></el-table-column>
      <fragment v-for="col in dg.columns" :key="col.field">
        <el-table-column :class-name="dg.dgName" :prop="col.field" :label="col.label" :width="col.width">
          <template slot-scope="{row}">
            <template v-if="col.field == 'selinaTime'">{{ row.selinaDayStart }} - {{ row.selinaDayEnd }}</template>
            <template v-else-if="col.field == 'leaveType'">{{ row.mainType.typeName }} | {{ row.childType.typeName
            }}</template>
            <template v-else-if="col.field == 'remark'">{{ row.leaveState == 0 ? '待核实' : row.leaveState
              == 1 ? '通过' : row.leaveState == 2 ? '拒绝' : '强制取消' }}</template>
            <template v-else-if="col.field == 'education'">{{ row.disposeUser == null ? ''
              : row.disposeUser.realName }}</template>

            <template v-else>{{ getColVal(row, col.field) }}</template>
          </template>
        </el-table-column>
      </fragment>
    </el-table>
    <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
      @pagination="getDgList" />

    <AddLeaveType v-if="md.add.state" :state="md.add.state" @getMdState="getAddMdState" @reloadDg="getDgList" />

    <BackLeaveType v-if="md.backAfter.state" :myData="currentData" @getMdState="getAddMdState" @reloadDg="getDgList" />

    <checkLeaveType v-if="md.notAudit.state" :state="md.notAudit.state" :data="currentData" @getMdState="getAddMdState"
      @reloadDg="getDgList" />

    <setDriverType v-if="md.setDirver.state" :state="md.setDirver.state" :datas="currentData" @getMdState="getAddMdState"
      @reloadDg="getDgList" />

    <UpdateLeaveType v-if="md.update.state" :state="md.update.state" :data="currentData" @getMdState="getAddMdState"
      @reloadDg="getDgList" />

  </div>
</template>
<script>
import { getLeaveList, deleteLeave } from "@/api/services/personMan.service";
import { getGroupDict, getLeaveTypeDict } from "@/api/services/common.service";
import DataGridResize from '@/views/mixins/DataGridResize';
import DataGridBase from "@/views/mixins/DataGridBase";
import elDragDialog from '@/directive/el-drag-dialog';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';
import SelTeamGroup from '@/components/SelTeamGroup';
import AddLeaveType from './add-leave-type'
import UpdateLeaveType from './update-leave-type'
import BackLeaveType from './back-leave-type'
import checkLeaveType from './check-leave-type'
import setDriverType from './set-driver-type'

export default {
  name: 'LeaveList',
  components: { TableSelfSet, Pagination, SelTeamGroup, AddLeaveType, UpdateLeaveType, checkLeaveType, setDriverType, BackLeaveType },
  mixins: [DataGridResize, DataGridBase],
  directives: { elDragDialog },
  data() {
    let cols = [
      { label: '姓名', field: 'leaveUser.realName', width: 60 },
      { label: '类型', field: 'leaveType', width: 120 },
      { label: '事由', field: 'leaveReason' },
      { label: '状态', field: 'remark', width: 70 },
      { label: '请假开始时间', field: 'leaveStartTime', width: 140 },
      { label: '请假结束时间', field: 'leaveEndTime', width: 140 },
      { label: '顶班驾驶员', field: 'selinaUser.realName', width: 120 },
      { label: '顶班时间', field: 'selinaTime', width: 280 },
      { label: '审核人', field: 'education', width: 120 },
      { label: '顶班备注', field: 'selinaRemark', width: 100 },
    ];

    return {
      dg: {
        dgName: 'dg',
        tbName: 'leaveListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1,
          rows: 20,
          time: '',
          find: '',
          sTime: '',
          eTime: '',
          childType: '',
          state: '',
          groupIds: [], // 小组id
        },
      },
      md: { // 弹框数据
        add: { state: false },
        update: { state: false },
        backAfter: { state: false },
        notAudit: { state: false },
        setDirver: { state: false },
      },
      currentData: null,
      stateOptions: [
        { label: '待审核', value: 0 },
        { label: '通过', value: 1 },
        { label: '拒绝', value: 2 },
        { label: '强制取消', value: -1 },
      ],
      leaveTypeOptions: [], // 部门
      groupOptions: [] // 小组
    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList()
    that.getDictInfo()
  },
  methods: {
    getDictInfo() {
      // // 获取小组下拉列表
      // getGroupDict({teamId: ''}).then(res => {
      //   this.groupOptions = res.data
      // })
      // 请假类型
      getLeaveTypeDict({ find: '', ps: '' }).then(res => {
        this.leaveTypeOptions = res.data
      });
    },
    // 获取选中-小组数据
    getSeledTeamGroup(e) {
      this.U.setFmArr(this.dg.ps.groupIds, e.val);
    },
    // 新增请假
    handleAdd() {
      this.md.add.state = true;
    },
    // 审核通过
    handleAudit() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length != 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        let row = rows[0];

        that.currentData = row;
        that.md.setDirver.state = true;
      }
    },
    // 审核不通过
    handleNotAudit() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length != 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        let row = rows[0];

        that.currentData = row;
        that.md.notAudit.state = true;
      }
    },
    // 销假
    handleBackAfter() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length != 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        let row = rows[0];

        // // 判断当前时间是否在请假起止时间内，在则能销假，不能则不能销假
        // let ct = new Date().getTime();
        // let leaveSt = U.str2date(row.leaveStartTime).getTime();
        // let leaveEt = U.str2date(row.leaveEndTime).getTime();
        // if(ct <= leaveEt && (ct < leaveSt || ct > leaveEt)){
        //   return U.qerror('当前已不在请假起止时间内，不能销假');
        // }

        that.currentData = row;
        that.md.backAfter.state = true;
      }
    },
    // 取消
    getAddMdState() {
      let eleRef = this.dg.tbName
      this.$refs[eleRef].clearSelection();
      this.md = { // 弹框数据
        add: { state: false },
        update: { state: false },
        backAfter: { state: false },
        notAudit: { state: false },
        setDirver: { state: false },
      }
    },
    // 修改
    getUpdMdState() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length != 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        that.currentData = rows[0];
        // 未审核 - 修改请假信息
        if (!that.currentData.selinaUser) {
          that.md.update.state = true;
          return
        }
        // 已审核 - 修改顶班驾驶员
        that.md.setDirver.state = true;
      }
    },
    // 删除-请假记录
    deleteLeave() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length != 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        let row = rows[0];

        U.qconfim('您确认删除所选请假记录吗？', '删除询问').then(r => {
          if (r) {
            deleteLeave({ id: row.id }).then((res) => {
              if (res.code != 1) {
                U.qerror(res.msg);
              } else {
                U.qsuccess(res.msg);
                that.getDgList();
              }
            });
          }
        });
      }
    },
    // 获取-表格数据列表
    getDgList() {
      let that = this, U = that.U, ps = U.scopy(that.dg.ps);

      if (ps.data) {
        ps.sTime = ps.data[0]
        ps.eTime = ps.data[1]
      }
      if (ps.groupIds && ps.groupIds.length > 0) {
        ps.groupId = ps.groupIds.join(',');
        delete ps.groupIds;
      }
      getLeaveList(ps).then(res => {
        const { code, data, count } = res
        if (code === 1) {
          let list = data;
          list.forEach(it => { it.dgName = that.dg.dgName; });
          that.dg.list = list;
          that.dg.total = count;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.filter-container>* {
  display: block;
}

.idCard-wrapper {
  display: inline-flex;

  .idCard {
    width: 50px;
  }
}
</style>
